<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .header,
        .footer {
            width: 1200px;
            margin: 0 auto;
            background-color: skyblue;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 50px;
            height: 120px;
            color: #fff;
        }

        .footer {
            height: 300px;
        }

        ul,
        li {
            list-style: none;
        }

        ul {
            width: 1200px;
            display: flex;
            flex-wrap: wrap;
            margin: 0 auto;
            justify-content: space-between;
            padding-top: 10px;
        }

        li {
            width: 290px;
            border: 1px solid #333;
            margin-bottom: 10px;
            padding: 5px;
            box-sizing: border-box;
        }

        li>a>img {
            width: 278px;
            height: 274px;
            display: block;
        }

        .loading {
            width:1000px;
            margin: 0 auto;
            display:flex;
            justify-content: center;
            align-items: center;
            display: none;
        }

        .loading > img {
            height:100px;
        }
    </style>
    <script src="js/data.js"></script>
</head>

<body>

    <div class="header">网页头部</div>
    <ul>


    </ul>
    <div class="loading">
        <img src="https://img.zcool.cn/community/01892657d517b80000012e7e89bb7a.gif" alt="">
    </div>
    <div class="footer">网页底部</div>
    <script>
        function second_to_minute(s) {
            return `${parseInt(s / 60)}分${s % 60}秒`
        }

        function timestamp_to_time(stamp) {
            var date = new Date(stamp);
            var year = date.getFullYear() + "-";
            var month =
                (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "-";
            var day = (date.getDate() < 10 ?
                "0" + date.getDate() : date.getDate()) + " ";
            var hour = date.getHours() + ":";
            var minute = date.getMinutes() + ":";
            var second = date.getSeconds();
            return year + month + day + hour + minute + second;
        }


        var newdata = JSON.parse(data);
        // 数据显示区域获取
        var current = 1; // 表示用户想看的页码  当前第几页
        var pagesize = 4; // 每页显示几条;
        var total = 0; // 总共多少页 
        var content = document.querySelector('ul'); // ul 标签
        var loading = document.querySelector('.loading')
        var flag = true; // 假设 可以加载  

        function handle_page() {
            
            // console.log(newdata) 对象
            var videos = newdata['data']['vlist'];
            
            // console.log(videos)
            
            var cutdata = videos.slice((current - 1) * pagesize, current * pagesize)
            content.innerHTML += cutdata.reduce(function (prev, item) {
                return prev +
                    `<li>
                <a href="${item.vurl}"><img src="${item.vpic}" alt=""></a>
                <p>标题:${item.shortTitle}</p>
                <p>简介:${item.vt}</p>
                <p>时长:${second_to_minute(item.timeLength)}</p>
                <p>上映时间:${timestamp_to_time(item.publishTime)}</p>
            </li>`
            }, '');

        }

        handle_page(); // 打开页面默认渲染第一页 每页4条

        // 瀑布流通过 用户滚动滚动条 来实现是否加载新的页面  
        window.onscroll = function(){
            if(current == total){ // 如果当前已经是最后一页
                //停止加载 
                return 
            }
            // 卷去的高度 
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop

            // 可视窗口的高度
            var windowHeight = document.documentElement.clientHeight;


            // ul上方偏移量 
            var ulTop = content.offsetTop;

            // ul 元素的高度 
            var ulHeight = content.offsetHeight;
            if(scrollTop+windowHeight <= ulTop+ulHeight){
                // 不需要加载新的页面
                // console.log('我不加载'); 
                return

            }
            // ================= 走到这里需要加载下一页 还有下一页 
            // 到这里开关是true  开启的状态 也就是 要加载   
            if(flag == false){ // 如果状态是false 表示 不加载 
                return 
            }
            console.log('开始滚动');
            // 到了这儿 就是满足加载数据的条件  
            loading.style.display = 'flex';
            // 让动图显示 

            flag = false ;  // 我加载的时候  不需要另外的再加载了  
            // 滚动条我们用的是 定时器来模拟 
            // 一旦滚动条滚动 会触发多个定时器  
            // 每个定时器都加载一页  所以出现了   多个页面同时加载的情况 
            // 我们为了保证以此只能加载一页  
            // 当有一个定时器在加载的时候 其它定时器 不加载页面 
            
            // 用定时器来模拟下一页 
            // 多少秒之后加载下一页 
            setTimeout(function(){
                current++
                handle_page();
                //加载完毕隐藏 动图 
                loading.style.display = 'none';
                // 改变状态 不在加载了
                flag = true; 
            },Math.floor(Math.random()*3000)+2000);
            
        }
        
    </script>

</body>

</html>